<template>
  <div class="add-employee">
    <header class="add-header">
      <el-page-header
        :content="id ? '编辑员工' : '添加员工'"
        @back="$router.back()"
      />
    </header>
    <main class="add-main">
      <div class="form-container">
        <div class="form">
          <!--         表单四要素
           1.el-form添加属性 :model
           2.el-form添加属性 :rules
           3.el-form-item添加属性 prop
           4.el-input添加属性 v-model
           -->
          <el-form
            ref="employeeInfoForm"
            label-width="100px"
            :model="employeeInfoForm"
            :rules="employeeformRules"
          >
            <el-form-item label="账号：" prop="username">
              <el-input
                v-model="employeeInfoForm.username"
                placeholder="请输入账号"
              />
            </el-form-item>
            <el-form-item label="员工姓名：" prop="name">
              <el-input
                v-model="employeeInfoForm.name"
                placeholder="请输入员工姓名"
              />
            </el-form-item>
            <el-form-item label="手机号：" prop="phone">
              <el-input
                v-model="employeeInfoForm.phone"
                placeholder="请输入手机号"
              />
            </el-form-item>
            <el-form-item label="性别：" prop="sex">
              <el-radio-group v-model="employeeInfoForm.sex">
                <el-radio label="1">男</el-radio>
                <el-radio label="2">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="身份证号：" prop="idNumber">
              <el-input
                v-model="employeeInfoForm.idNumber"
                placeholder="请输入身份证号"
              />
            </el-form-item>
          </el-form>
        </div>
        <footer class="add-footer">
          <div class="btn-container">
            <el-button @click="resetForm">取消</el-button>
            <el-button type="primary" @click="saveForm">保存</el-button>
            <el-button
              v-show="!id"
              type="primary"
              style="background-color: #000; border-color: #000"
              @click="saveAndContinue"
              >保存并继续添加</el-button
            >
          </div>
        </footer>
      </div>
    </main>
  </div>
</template>

<script>
import {
  addEmployeeAPI,
  getEmployeeDetailAPI,
  editEmployeeAPI
} from '@/api/employee'

export default {
  data () {
    return {
      employeeInfoForm: {
        username: '', // 账号
        name: '', // 员工姓名
        phone: '', // 手机号
        sex: '1', // 性别
        idNumber: '' // 身份证号
      },
      employeeformRules: {
        username: [
          {
            required: true,
            message: '请输入账号',
            trigger: 'blur'
          },
          {
            pattern: /^[a-zA-Z0-9]{3,20}$/,
            message: '账号长度应是3-20，且只能包含字母、数字或下划线',
            trigger: 'blur'
          }
        ],
        name: [
          {
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }
        ],
        phone: [
          {
            required: true,
            message: '请输入手机号码',
            trigger: 'blur'
          },
          {
            pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
            message: '格式不正确',
            trigger: 'blur'
          }
        ],
        sex: [
          {
            required: true,
            message: '请选择性别',
            trigger: 'change'
          }
        ],
        idNumber: [
          {
            required: true,
            message: '请输入身份证号',
            trigger: 'blur'
          },
          {
            pattern:
              /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/,
            message: '格式不正确',
            trigger: 'blur'
          }
        ]
      },
      editRequestData: {}
    }
  },
  computed: {
    id () {
      return this.$route.query.id
    }
  },
  mounted () {
    if (this.id) {
      this.getEmployeeDetail()
    }
  },
  methods: {
    // 手动给性别添加校验
    // validateSex() {
    //   this.$refs.employeeInfoForm.validateField("sex");
    // },
    // 回显数据
    async getEmployeeDetail () {
      const { data } = await getEmployeeDetailAPI(this.id)
      console.log('编辑 调用接口返回的数据 返回的数据' + data)
      this.editRequestData = data
      const { username, name, phone, sex, idNumber } = data
      this.employeeInfoForm = { username, name, phone, sex, idNumber }
    },
    resetForm () {
      this.$refs.employeeInfoForm.resetFields()
      this.$router.back()
    },
    saveForm () {
      // 兜底校验
      this.$refs.employeeInfoForm.validate(async valid => {
        if (!valid) return
        if (this.id) {
          Object.assign(this.editRequestData, {
            ...this.employeeInfoForm
          })
          // console.log('this.editRequestData' + this.editRequestData)
          await editEmployeeAPI(this.editRequestData)

          this.$message.success('编辑成功')
        } else {
          await addEmployeeAPI(this.employeeInfoForm)
          this.$message.success('添加成功')
        }
        this.$router.back()
      })
    },
    saveAndContinue () {
      // 兜底校验
      this.$refs.employeeInfoForm.validate(async valid => {
        if (!valid) return
        await addEmployeeAPI(this.employeeInfoForm)
        this.$message.success('添加成功')
        this.$refs.employeeInfoForm.resetFields()
      })
    }
    // 员工添加成功 清空表单 不跳转
  }
}
</script>

<style lang="scss" scoped>
.add-employee {
  background-color: #f4f6f8;
  height: 100vh;

  .add-header {
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 64px;
    background-color: #fff;

    .left {
      span {
        margin-right: 4px;
      }

      .arrow {
        cursor: pointer;
      }
    }

    .right {
      text-align: right;
    }
  }

  .add-main {
    background: #f4f6f8;
    padding: 20px 130px;

    .form-container {
      background-color: #fff;

      // .title {
      //   height: 60px;
      //   line-height: 60px;
      //   padding-left: 20px;
      // }

      .form {
        margin-bottom: 20px;
        padding: 20px 65px 24px;
        margin: 10px;
        .el-form {
          // flex-wrap: wrap;
          display: block;

          .el-form-item {
            ::v-deep .el-form-item__label {
              text-align: right; // 标签右对齐
              // width: 120px; // 固定标签宽度
              font-weight: 400;
              padding: 0px;
              // color: red;
              // .el-form-item__label {
              //   color: #333; // 标签字体颜色
              //   font-size: 14px; // 字体大小
              //   // font-weight: 500; // 字体加粗（可根据需要调整为bold）
              // }
            }
            .el-input {
              width: 400px; // 按需设置宽度，如300px、50%等
            }
            margin-bottom: 16px; // 可选：增加表单项之间的垂直间距
          }
        }
      }

      .add-footer {
        bottom: 0;
        width: 100%;
        padding: 24px 50px;
        color: #000000d9;
        font-size: 14px;
        background: #fff;
        text-align: center;
      }
    }

    .preview {
      img {
        width: 100px;
      }
    }
  }
}
</style>
